<template>
	<view class="DistributionService" v-if="value" @click.prevent.stop @touchmove.stop.prevent="stopScrolling" @click="clsoePopup">
		<view class="DistributionService-main" @click.prevent.stop>
			<!-- :style="{ height: contentHeight + 'rpx' }" -->
			<view :class="{ 'dy-bg': isDyBg }" class="DistributionService-main-content">
				<view class="fail-icon" v-if="showFailIcon"></view>
				<slot></slot>
				<button class="common-btn save-btn" v-if="buttonNum === 1" @click.prevent.stop="button1Click">{{ buttonText[0] }}</button>
				<view v-else-if="buttonNum === 2" class="flex row-between btn-wapper">
					<button class="common-btn cancle-btn" @click.prevent.stop="button2Click">{{ buttonText[1] }}</button>
					<button class="common-btn sure-btn" @click.prevent.stop="button1Click">{{ buttonText[0] }}</button>
				</view>
			</view>
			<view class="DistributionService-main-close" v-if="showClose">
				<image @click.prevent.stop="clsoePopup" src="@/static/icon/icon_service_close.png" class="image" />
			</view>
		</view>
	</view>
</template>

<script>
 import { mapMutations, mapGetters } from 'vuex';
export default {
	name: 'dyPopup',

	props: {
		value: {
			type: Boolean,
			default: false
		},
		isDyBg: {
			type: Boolean,
			default: false
		},
		buttonNum: {
			type: Number,
			default: 1
		},
		buttonText: {
			type: Array,
			default: () => ['保存图片']
		},
		showClose: {
			type: Boolean,
			default: false
		},
		contentHeight: {
			type: Number,
			default: 396
		},
		showFailIcon: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		...mapGetters(['getIsShowNotBind','getIsShowNotBindCode'])
	},
	data() {
		return {};
	},

	methods: {
		...mapMutations(['changeShowNotBindCode','changeShowNotBind']),
		// 阻止遮罩滚动穿透
		stopScrolling() {
			return;
		},

		clsoePopup() {
			const { getIsShowNotBind  } = this
			console.log(this)
			if(getIsShowNotBind){
				this.changeShowNotBind(false)
			}else{
				this.changeShowNotBindCode(false)
			}
			// this.$emit('input', false);
		},
		button1Click() {
			this.$emit('button1Click');
		},
		button2Click() {
			this.clsoePopup();
			this.$emit('button2Click');
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.DistributionService {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999999;
	background: rgba(0, 0, 0, 0.6);

	&-main {
		position: fixed;
		top: 50%;
		left: 0;
		width: 100%;
		padding: 0 70rpx;
		transform: translateY(-60%);

		&-content {
			width: 602rpx;
			// height: 396rpx
			padding: 56rpx 60rpx;
			background: linear-gradient(180deg, #ffeed0 0%, #ffffff 50%);
			border-radius: 12px;
			text-align: center;
			position: relative;

			.common-btn {
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 12px;
				font-size: 14px;
				font-weight: bold;
			}
			.save-btn,
			.sure-btn {
				width: 480rpx;
				background: #ff6b11;
				color: #ffffff;
			}
			.sure-btn,
			.cancle-btn {
				width: 260rpx;
			}
			.cancle-btn {
				background: #f5f5f5;
				color: #666666;
			}
		}
		.dy-bg {
			position: relative;
		}
		.fail-icon {
			position: absolute;
			right: 219rpx;
			top: -71rpx;
			width: 160rpx;
			height: 142rpx;
			background: url(https://dyfxmp-pre.lianlianlvyou.com/avatar/original/LL_IMAGE_bc53b80c46e6495e8612312a4b8a9012.png) no-repeat;
			background-size: 100% 100%;
		}

		&-close {
			text-align: center;
			margin-top: 30rpx;

			.image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
	.dy-bg::before {
		content: '';
		position: absolute;
		right: 8rpx;
		top: 12rpx;
		width: 236rpx;
		height: 100rpx;
		background: url(https://dyfxmp-pre.lianlianlvyou.com/avatar/original/LL_IMAGE_8b4ca74480424856a0d260eff986eeb4.png) no-repeat;
		background-size: 100% 100%;
	}
}
.btn-wapper {
	width: 548rpx;
	position: relative;
	left: -32rpx;
	margin-top: 50rpx;
}
button::after {
	display: none;
	border: none;
}
</style>
